<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='设置',active='setting'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>

<!--    内容-->
<div class="content-page">
<div class="content">
<div class="container">
<!--    信息反馈-->
    <th:block th:if="${res}">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             th:style="'height: 100px;width: 66px;background-color: '+${res=='修改成功'?'blue':'red'}" >
            <div class="modal-dialog modal-sm" role="document" >
                <div class="modal-content" style="font-size: 30px; border:0px;background-color:rgba(0,0,0,0.0);">
                    <div class="modal-body" style="height: 100%;text-align: center;"><th:block th:text="${res}"/></div>

                </div>
            </div>
        </div>
        <script>
            document.getElementById("myModal").setAttribute("class","modal fade in");
            document.getElementById("myModal").setAttribute("style","display: block;");
            if($(".modal-body").text()=='修改成功'){
                $(".modal-body").css("color","green");
            }else{
                $(".modal-body").css("color","red");
            }
            //改变地址栏
            window.history.pushState({}, 0,  "/admin/setting");
            setTimeout(function(){
                document.getElementById("myModal").setAttribute("class","modal fade");
                document.getElementById("myModal").removeAttribute("style");},1500);
        </script>
    </th:block>
<!--    修改邮箱-->
    <form id="from1" class="form-horizontal" th:action="@{/admin/setting/checkCode}" method="post">
        <h3>绑定邮箱</h3>
        <hr/>
        <div class="form-group" >
            <label class="col-sm-2 control-label">原邮箱</label>

            <div class="col-sm-4">
                <p class="form-control-static"><th:block class="form-control" th:text="${session.loginUser.email}"/></p>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail1" class="col-sm-2 control-label">新邮箱</label>
            <div class="col-sm-4">
                <input type="email" name="email" class="form-control" id="inputEmail1" placeholder="请输入新邮箱">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword1" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-2">
                <input type="text" name="code" class="form-control" id="inputPassword1" placeholder="请输入验证码">
            </div>
            <div class="col-sm-2">
                <button type="button" class="btn btn-warning" style="width:100%;" id="getCode">获取验证码</button>

            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword1" class="col-sm-2 control-label"></label>

            <div class="col-sm-4">
                <button type="button" class="btn btn-warning" id="subEmail"  style="width:100%;">保存</button>

            </div>


        </div>
    </form>
    <script>
        //发送验证码

        $("#getCode").click(function (){
            this.disabled = true;

            $.ajax({
                url:"/admin/setting/sendCode",

                success:function (ev){//响应成功后的回调函数
                    if(ev){
                        againTime();
                    }else{
                        alert("发送失败！！！");
                        this.removeAttribute("disabled");
                    }
                },
                dataType:"json"//响应结果的数据格式
            });
        });
        //六十秒倒计时
        var beginTime=60;
        var myVar;
        function againTime(){
            beginTime=60;
            myVar=setInterval(function(){myTimer()},1000);
        }
        function myTimer(){
            if(beginTime<0) {
                clearInterval(myVar);
                document.getElementById("getCode").innerHTML='发送验证码';
                document.getElementById("getCode").removeAttribute("disabled");
                return ;
            }
            document.getElementById("getCode").innerHTML=beginTime+' 秒后重新发送';
            beginTime--;
        }
        //提交修改邮箱表单
        $("#subEmail").click(function (){

            var emailText = $("#inputEmail1").val();
            var passText = $("#inputPassword1").val();
            if(emailText==null||emailText.length==0){
                alert("邮箱不能为空");
                return false;
            }
            if(passText==null||passText.length==0){
                alert("验证码不能为空");
                return false;
            }

            $("#from1").submit();


        });
    </script>


    <!--    修改密码-->
    <form id="from2" class="form-horizontal" th:action="@{/admin/setting/setPassword}" method="post">
        <h3>修改密码</h3>
        <hr/>


        <div class="form-group" >
            <label for="inputOldPassword2" class="col-sm-2 control-label">输入旧密码</label>

            <div class="col-sm-4">
                <input type="password" name="oldPassword2" class="form-control" id="inputOldPassword2" placeholder="请输入旧密码">
            </div>
            <div class="col-sm-2" style="margin-top: 8px">
                <a href="javascript:void(0)" onclick="checkEmail3()" style="color: #fed94c;">忘记密码？</a>

            </div>
        </div>
        <div class="form-group">
            <label for="inputNewPasswod2" class="col-sm-2 control-label">输入新密码</label>
            <div class="col-sm-4">
                <input type="password" name="newPassword2" class="form-control" id="inputNewPasswod2" placeholder="请输入新密码">
            </div>
        </div>
        <div class="form-group">
            <label for="inputNewAgainPassword2" class="col-sm-2 control-label">确认新密码</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" id="inputNewAgainPassword2" placeholder="请确认新密码">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label"></label>

            <div class="col-sm-4">
                <button type="button" class="btn btn-warning" id="subPassword"  style="width:100%;">保存</button>
            </div>


        </div>

    </form>
    <script>

        //提交修改密码表单
        $("#subPassword").click(function (){

            var old = $("#inputOldPassword2").val();
            var pass1 = $("#inputNewPasswod2").val();
            var pass2 = $("#inputNewAgainPassword2").val();
            if(old==null||old.length==0){
                alert("密码不能为空");
                return false;
            }
            if(pass1==null||pass1.length==0||pass2==null||pass2.length==0){
                alert("密码不能为空");
                return false;
            }
            if(pass1!=pass2){
                alert("两次密码不一致");
                return false;
            }
            $("#from2").submit();


        });
    </script>



    <!-- 邮箱验证修改密码Modal -->
    <div class="modal fade" id="myModalpassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" >
                    <button type="button" onclick="remove3()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">验证身份</h4>
                </div>
                <div class="modal-body">
                    <form id="from3" class="form-horizontal" th:action="@{/admin/setting/setPasswordByEmail}" method="post">
                        <div class="form-group">
                            <div class="col-sm-12" style="text-align: center;">
                                <p class="form-control-static">使用绑定邮箱<th:block class="form-control" th:text="${session.loginUser.email}"/>验证</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword1" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-5">
                                <input type="text" name="code3" class="form-control" id="inputCode3" placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-5">
                                <button type="button" class="btn btn-warning" style="width:100%;" id="getCode3">获取验证码</button>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNewPasswod2" class="col-sm-2 control-label">输入新密码</label>
                            <div class="col-sm-10">
                                <input type="password" name="newPassword3" class="form-control" id="inputNewPasswod3" placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputNewAgainPassword2" class="col-sm-2 control-label">确认新密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputNewAgainPassword3" placeholder="请确认新密码">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer" >
                    <button type="button" class="btn btn-warning" id="subPassword3" style="width: 100%">验证</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        //使用邮修改密码
        function checkEmail3(){
            //显示Modal
            document.getElementById("myModalpassword").setAttribute("class","modal fade in");
            document.getElementById("myModalpassword").setAttribute("style","display: block;");
        }
        function remove3(){
            document.getElementById("myModalpassword").setAttribute("class","modal fade");
            document.getElementById("myModalpassword").removeAttribute("style");
        }
        //发送验证码

        $("#getCode3").click(function (){
            this.disabled = true;

            $.ajax({
                url:"/admin/setting/sendCode",

                success:function (ev){//响应成功后的回调函数
                    if(ev){
                        againTime3();
                    }else{
                        alert("发送失败！！！");
                        this.removeAttribute("disabled");
                    }
                },
                dataType:"json"//响应结果的数据格式
            });
        });
        //六十秒倒计时
        var beginTime=60;
        var myVar;
        function againTime3(){
            beginTime=60;
            myVar=setInterval(function(){myTimer3()},1000);
        }
        function myTimer3(){
            if(beginTime<0) {
                clearInterval(myVar);
                document.getElementById("getCode3").innerHTML='发送验证码';
                document.getElementById("getCode3").removeAttribute("disabled");
                return ;
            }
            document.getElementById("getCode3").innerHTML=beginTime+' 秒后重新发送';
            beginTime--;
        }
        //提交修改密码表单
        $("#subPassword3").click(function (){

            var code = $("#inputCode3").val();
            var pass1 = $("#inputNewPasswod3").val();
            var pass2 = $("#inputNewAgainPassword3").val();
            if(code==null||code.length==0){
                alert("验证码不能为空");
                return false;
            }
            if(pass1==null||pass1.length==0||pass2==null||pass2.length==0){
                alert("密码不能为空");
                return false;
            }
            if(pass1!=pass2){
                alert("两次密码不一致");
                return false;
            }
            $("#from3").submit();

        });
    </script>

<!--    基本信息-->
    <form id="from4" class="form-horizontal" th:action="@{/admin/setting/setMessage}" method="post">
        <h3>其它设置</h3>
        <hr/>

        <div class="form-group" >
            <label for="inputUsername4" class="col-sm-2 control-label">用户名</label>

            <div class="col-sm-6">
                <p class="form-control-static showUsername4" id="showUsername4"><th:block th:text="${session.loginUser.username}"/></p>
                <input type="text" name="username" class="form-control inputUsername4" id="inputUsername4" th:value="${session.loginUser.username}" style="display: none;">
            </div>

        </div>
        <div class="form-group" >
            <label for="inputTitle4" class="col-sm-2 control-label">博客标题</label>

            <div class="col-sm-6">
                <p class="form-control-static showUsername4"><th:block th:text="${session.loginUser.title}"/></p>

                <input style="display: none;" type="text" name="title" class="form-control inputUsername4" id="inputTitle4" th:value="${session.loginUser.title}">
            </div>

        </div>
        <div class="form-group" >

            <label for="inputDescribes4" class="col-sm-2 control-label">一句话介绍博客</label>

            <div class="col-sm-6">
                <p class="form-control-static showUsername4"><th:block th:text="${session.loginUser.describes}"/></p>
                <input style="display: none;" type="text" name="describes" class="form-control inputUsername4" id="inputDescribes4" th:value="${session.loginUser.describes}">
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label"></label>
            <div class="col-sm-2">
                <button type="button" class="btn btn-warning" id="showinput4" onclick="opens(this)" style="width:100%;">编辑</button>
            </div>

            <div class="col-sm-2">
                <button type="button" class="btn btn-warning" id="submit4"  style="width:100%;" disabled>保存</button>
            </div>


        </div>

    </form>

    </form>
    <script>
        var flags=0;

        //启用编辑
        function showusername(){
            flags=1;
            $(".showUsername4").hide();
            $(".inputUsername4").show();
            document.getElementById("submit4").removeAttribute("disabled");

        }
        //关闭编辑
        function hideusername(){
            flags=0;
            $(".showUsername4").show();
            $(".inputUsername4").hide();
            document.getElementById("submit4").setAttribute("disabled",true);
        }
        function opens(ev){
            //alert(flags);
            if(flags){
                hideusername();
                $(ev).html("编辑");
            }else{
                $(ev).html("取消");
                showusername();
            }

        }
        //开启
        //$("#showinput4").click(opens(this));
        //提交保存
        $("#submit4").click(function (){

            $(".inputUsername4").parent().parent().attr("class","form-group");

            var va1 = $("#inputUsername4").val();
            var va2 = $("#inputTitle4").val();
            var va3 = $("#inputDescribes4").val();
            if(va1==null||va1.length==0){
                $("#inputUsername4").parent().parent().attr("class","form-group has-error");
                return ;
            }
            if(va2==null||va2.length==0){
                $("#inputTitle4").parent().parent().attr("class","form-group has-error");
                return ;
            }
            if(va2==null||va2.length==0){
                $("#inputDescribes4").parent().parent().attr("class","form-group has-error");
                return ;
            }

            $("#from4").submit();
            // $.ajax({
            //     url:'admin/setting/updateMessage',
            //     type:"post",
            //     data:$("#from4").serialize(),
            //     success:function (evx){//响应成功后的回调函数
            //         if(!evx){
            //             alert("用户名已存在");
            //         }else{
            //             window.location.href=window.location.href;
            //         }
            //     },
            //     dataType:"json"//响应结果的数据格式
            // });

        });


    </script>

<div th:replace="back/footer :: footer"></div>
</div>
</div>
</div>
</div>




</body>
</html>